<!-- Dom模板 -->
<template>
  <div  class="left">
    <ul>
      <!-- Dom内容 -->
      <router-link
        :to="item.path"
        tag="li"
        v-for="(item, index) in navList"
        :key="index"
        :class="$route.meta.Index === index ? 'active' : ''"
      >
        {{ item.meta.title }}
      </router-link>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      navList: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.navList = this.$router.options.routes.filter((item) => {
      return item.meta.left;
    });
  },
  // Vue方法定义
  methods: {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.top {
  height: 60px;
  display: flex;
  background-color: #4a5259;
  color: white;
  align-items: center;
}
h3 {
  margin: 0 60px;
}
.con {
  display: flex;
  align-items: center;
}
.con p {
  margin-right: 10px;
}
.active {
  color: gold;
}
.left {
  text-align: center;
  width: 230px;
  height: 100%;
  background-color: #4a5259;
  color: white;
  line-height: 70px;
  font-weight: bold;
}
</style>